<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.绘制圆弧</title>
    <style>
        body>* {
            margin-left: 40px;
        }li{
             margin-bottom:  0.5em;
         }
        canvas{
            display: inline-block;
            vertical-align: top;
        }
        ol{
            display: block;
        }
    </style>
</head>
<body>
<h4><a href="http://caibaojian.com/canvas/9.html">绘制圆弧</a></h4>
<div>
    <canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>

</div>
<ol>
    <li>标准圆弧 arc()</li>
    <li>复杂圆弧 arcTo()</li>
    <li>二次贝塞尔曲线 quadraticCurveTo()</li>
    <li>三次贝塞尔曲线 bezierCurveTo()</li>
</ol>
<!--<p>tip：</p>-->
<!--<h5>实例：</h5>-->
<!--<canvas id="canimg"></canvas>-->
<script>

    var candom= document.getElementById('canvas'),
        can2d = candom.getContext('2d');
    candom.width=500;
    candom.height=500;
    candom.style.background='#eee';

    can2d.beginPath();
    can2d.arc( 100, 100, 50, Math.PI, Math.PI * 3 / 2, false);  //x、y、半径、开始弧度值(Math.PI=π=180°)、结束弧度值、绘制方向（默认false顺时针）
    can2d.lineTo(250, 50); // w=200; x = w - r + x;
    can2d.arc( 250, 100, 50, Math.PI * 3 / 2, Math.PI * 2);
    can2d.lineTo(300, 200);
    can2d.arc(250, 200, 50, 0, Math.PI  / 2);
    can2d.lineTo(100, 250);
    can2d.arc(100, 200, 50, Math.PI / 2, Math.PI);
    can2d.closePath();
    can2d.stroke();
    can2d.fillStyle='orange';
    can2d.fill();


    //左上弧
    can2d.beginPath();
    can2d.arc(300,300, 50, Math.PI, Math.PI*3/2); //  180°~270°
    can2d.strokeStyle='red';
    can2d.stroke();

    can2d.fillStyle='red';
    can2d.fill();
    //右上弧
    can2d.beginPath();
    can2d.arc(300,300, 50, Math.PI*3/2, 0); //  270°~0
    can2d.strokeStyle='blue';
    can2d.stroke();

    can2d.fillStyle='blue';
    can2d.fill();
    //右下弧
    can2d.beginPath();
    can2d.arc(300,300,50, 0, Math.PI/2); //0~90°
    can2d.strokeStyle='green';
    can2d.stroke();

    can2d.fillStyle='green';
    can2d.fill();
    //左下弧
    can2d.beginPath();
    can2d.arc(300,300,50, Math.PI/2, Math.PI); //90°~ 180°
    can2d.strokeStyle='orange';
    can2d.stroke();

    can2d.fillStyle='orange';
    can2d.fill();
</script>
</body>
</html>